﻿
@{
    ViewData["Title"] = "Social Buttons";
}


<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <h2>Social Buttons</h2>
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="@Url.Action("Dashboard_1", "Dashboards")">Home</a>
            </li>
            <li class="breadcrumb-item">
                <a>Miscellaneous</a>
            </li>
            <li class="active breadcrumb-item">
                <strong>Social Buttons</strong>
            </li>
        </ol>
    </div>
    <div class="col-lg-2">

    </div>
</div>
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-content">

                    <strong>Social Buttons</strong> Social Sign-In Buttons made in pure CSS based on Bootstrap and Font Awesome!
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Buttons example</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">


                    <p>All available social buttons</p>

                    <a href="" class="btn btn-block btn-social btn-adn">
                        <span class="fa fa-adn"></span> Sign in with App.net
                    </a>
                    <a href="" class="btn btn-block btn-social btn-bitbucket">
                        <span class="fa fa-bitbucket"></span> Sign in with Bitbucket
                    </a>
                    <a href="" class="btn btn-block btn-social btn-dropbox">
                        <span class="fa fa-dropbox"></span> Sign in with Dropbox
                    </a>
                    <a href="" class="btn btn-block btn-social btn-facebook">
                        <span class="fa fa-facebook"></span> Sign in with Facebook
                    </a>
                    <a href="" class="btn btn-block btn-social btn-flickr">
                        <span class="fa fa-flickr"></span> Sign in with Flickr
                    </a>
                    <a href="" class="btn btn-block btn-social btn-foursquare">
                        <span class="fa fa-foursquare"></span> Sign in with Foursquare
                    </a>
                    <a href="" class="btn btn-block btn-social btn-github">
                        <span class="fa fa-github"></span> Sign in with GitHub
                    </a>
                    <a href="" class="btn btn-block btn-social btn-google">
                        <span class="fa fa-google"></span> Sign in with Google
                    </a>
                    <a href="" class="btn btn-block btn-social btn-instagram">
                        <span class="fa fa-instagram"></span> Sign in with Instagram
                    </a>
                    <a href="" class="btn btn-block btn-social btn-linkedin">
                        <span class="fa fa-linkedin"></span> Sign in with LinkedIn
                    </a>
                    <a href="" class="btn btn-block btn-social btn-microsoft">
                        <span class="fa fa-windows"></span> Sign in with Microsoft
                    </a>
                    <a href="" class="btn btn-block btn-social btn-openid">
                        <span class="fa fa-openid"></span> Sign in with OpenID
                    </a>
                    <a href="" class="btn btn-block btn-social btn-pinterest">
                        <span class="fa fa-pinterest"></span> Sign in with Pinterest
                    </a>
                    <a href="" class="btn btn-block btn-social btn-reddit">
                        <span class="fa fa-reddit"></span> Sign in with Reddit
                    </a>
                    <a href="" class="btn btn-block btn-social btn-soundcloud">
                        <span class="fa fa-soundcloud"></span> Sign in with SoundCloud
                    </a>
                    <a href="" class="btn btn-block btn-social btn-tumblr">
                        <span class="fa fa-tumblr"></span> Sign in with Tumblr
                    </a>
                    <a href="" class="btn btn-block btn-social btn-twitter">
                        <span class="fa fa-twitter"></span> Sign in with Twitter
                    </a>
                    <a href="" class="btn btn-block btn-social btn-vimeo">
                        <span class="fa fa-vimeo-square"></span> Sign in with Vimeo
                    </a>
                    <a href="" class="btn btn-block btn-social btn-vk">
                        <span class="fa fa-vk"></span> Sign in with VK
                    </a>
                    <a href="" class="btn btn-block btn-social btn-yahoo">
                        <span class="fa fa-yahoo"></span> Sign in with Yahoo!
                    </a>


                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="ibox  float-e-margins">
                <div class="ibox-title">
                    <h5>Example options</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">

                    <p> Icons only version</p>
                    <div class="text-center">
                        <a href="" class="btn btn-social-icon btn-adn"><span class="fa fa-adn"></span></a>
                        <a href="" class="btn btn-social-icon btn-bitbucket"><span class="fa fa-bitbucket"></span></a>
                        <a href="" class="btn btn-social-icon btn-dropbox"><span class="fa fa-dropbox"></span></a>
                        <a href="" class="btn btn-social-icon btn-facebook"><span class="fa fa-facebook"></span></a>
                        <a href="" class="btn btn-social-icon btn-flickr"><span class="fa fa-flickr"></span></a>
                        <a href="" class="btn btn-social-icon btn-foursquare"><span class="fa fa-foursquare"></span></a>
                        <a href="" class="btn btn-social-icon btn-github"><span class="fa fa-github"></span></a>
                        <a href="" class="btn btn-social-icon btn-google"><span class="fa fa-google"></span></a>
                        <a href="" class="btn btn-social-icon btn-instagram"><span class="fa fa-instagram"></span></a>
                        <a href="" class="btn btn-social-icon btn-linkedin"><span class="fa fa-linkedin"></span></a>
                        <a href="" class="btn btn-social-icon btn-microsoft"><span class="fa fa-windows"></span></a>
                        <a href="" class="btn btn-social-icon btn-openid"><span class="fa fa-openid"></span></a>
                        <a href="" class="btn btn-social-icon btn-pinterest"><span class="fa fa-pinterest"></span></a>
                        <a href="" class="btn btn-social-icon btn-reddit"><span class="fa fa-reddit"></span></a>
                        <a href="" class="btn btn-social-icon btn-soundcloud"><span class="fa fa-soundcloud"></span></a>
                        <a href="" class="btn btn-social-icon btn-tumblr"><span class="fa fa-tumblr"></span></a>
                        <a href="" class="btn btn-social-icon btn-twitter"><span class="fa fa-twitter"></span></a>
                        <a href="" class="btn btn-social-icon btn-vimeo"><span class="fa fa-vimeo-square"></span></a>
                        <a href="" class="btn btn-social-icon btn-vk"><span class="fa fa-vk"></span></a>
                        <a href="" class="btn btn-social-icon btn-yahoo"><span class="fa fa-yahoo"></span></a>
                    </div>

                    <div class="m-t-md">
                        <p>Available css social color class</p>

                        <table class="table">
                            <thead>
                                <tr>
                                    <th>Class name</th>
                                    <th>Service</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><code>btn-adn</code></td>
                                    <td>App.net</td>
                                </tr>
                                <tr>
                                    <td><code>btn-bitbucket</code></td>
                                    <td>Bitbucket</td>
                                </tr>
                                <tr>
                                    <td><code>btn-dropbox</code></td>
                                    <td>Dropbox</td>
                                </tr>
                                <tr>
                                    <td><code>btn-facebook</code></td>
                                    <td>Facebook</td>
                                </tr>
                                <tr>
                                    <td><code>btn-flickr</code></td>
                                    <td>Flickr</td>
                                </tr>
                                <tr>
                                    <td><code>btn-foursquare</code></td>
                                    <td>Foursquare</td>
                                </tr>
                                <tr>
                                    <td><code>btn-github</code></td>
                                    <td>Github</td>
                                </tr>
                                <tr>
                                    <td><code>btn-google</code></td>
                                    <td>Google</td>
                                </tr>
                                <tr>
                                    <td><code>btn-instagram</code></td>
                                    <td>Istagram</td>
                                </tr>
                                <tr>
                                    <td><code>btn-linkedin</code></td>
                                    <td>LinkedIn</td>
                                </tr>
                                <tr>
                                    <td><code>btn-microsoft</code></td>
                                    <td>Microsoft</td>
                                </tr>
                                <tr>
                                    <td><code>btn-openid</code></td>
                                    <td>OpenID</td>
                                </tr>
                                <tr>
                                    <td><code>btn-pinterest</code></td>
                                    <td>Pinterest</td>
                                </tr>
                                <tr>
                                    <td><code>btn-reddit</code></td>
                                    <td>Reddit</td>
                                </tr>
                                <tr>
                                    <td><code>btn-soundcloud</code></td>
                                    <td>Soundcloud</td>
                                </tr>
                                <tr>
                                    <td><code>btn-tumblr</code></td>
                                    <td>Tumblr</td>
                                </tr>
                                <tr>
                                    <td><code>btn-twitter</code></td>
                                    <td>Twitter</td>
                                </tr>
                                <tr>
                                    <td><code>btn-vimeo</code></td>
                                    <td>Vimeo</td>
                                </tr>
                                <tr>
                                    <td><code>btn-vk</code></td>
                                    <td>VK</td>
                                </tr>
                                <tr>
                                    <td><code>btn-yahoo</code></td>
                                    <td>Yahoo</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                </div>
            </div>
        </div>
    </div>


</div>

@section Styles {
    <environment names="Development,Staging,Production">
        <link rel="stylesheet" href="~/lib/bootstrapSocial/bootstrap-social.css" />
    </environment>
}

